<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
  <title>vue-app</title>
  <style type="text/css">
    html {
      background: #333;
    }
    .app-loading {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 9999;
      max-width: 640px;
      margin: auto;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
      background: #80bd01;
    }



    .app-loading-hide {
      left: 120%;
      bottom: 120%;
      opacity: 0;
    }



    .app-loading .box {
      width: 400px;
      height: 200px;
      text-align: center;
      color: #fff;
    }

    @-webkit-keyframes line-spin-fade-loader {
      50% {
        opacity: 0.3;
      }
      100% {
        opacity: 1;
      }
    }

    @-moz-keyframes line-spin-fade-loader {
      50% {
        opacity: 0.3;
      }
      100% {
        opacity: 1;
      }
    }

    @-o-keyframes line-spin-fade-loader {
      50% {
        opacity: 0.3;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes line-spin-fade-loader {
      50% {
        opacity: 0.3;
      }
      100% {
        opacity: 1;
      }
    }



    .app-loading .line-spin-fade-loader {
      position: relative;
      width: 0;
      margin: 0 auto;
    }



    .app-loading .line-spin-fade-loader>div:nth-child(1) {
      top: 20px;
      left: 0;
      -webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
      -moz-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
      -o-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
      animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
    }



    .app-loading .line-spin-fade-loader>div:nth-child(2) {
      top: 13.63636px;
      left: 13.63636px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
      -moz-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
      -o-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
      animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
    }



    .app-loading .line-spin-fade-loader>div:nth-child(3) {
      top: 0;
      left: 20px;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      -webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
      -moz-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
      -o-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
      animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
    }



    .app-loading .line-spin-fade-loader>div:nth-child(4) {
      top: -13.63636px;
      left: 13.63636px;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
      -moz-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
      -o-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
      animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
    }



    .app-loading .line-spin-fade-loader>div:nth-child(5) {
      top: -20px;
      left: 0;
      -webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
      -moz-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
      -o-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
      animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
    }



    .app-loading .line-spin-fade-loader>div:nth-child(6) {
      top: -13.63636px;
      left: -13.63636px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
      -moz-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
      -o-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
      animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
    }



    .app-loading .line-spin-fade-loader>div:nth-child(7) {
      top: 0;
      left: -20px;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      -webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
      -moz-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
      -o-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
      animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
    }



    .app-loading .line-spin-fade-loader>div:nth-child(8) {
      top: 13.63636px;
      left: -13.63636px;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
      -moz-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
      -o-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
      animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
    }



    .app-loading .line-spin-fade-loader>div {
      background-color: #fff;
      width: 4px;
      height: 35px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      margin: 2px;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -o-animation-fill-mode: both;
      animation-fill-mode: both;
      position: absolute;
      width: 5px;
      height: 15px;
    }



    .app-loading h2 {
      margin-top: 50px;
      line-height: 70px;
      font-size: 40px;
    }
  </style>
</head>

<body>
  <!--开始加载-->
  <div class="app-loading">
    <div class="box">
      <div class="line-spin-fade-loader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <h3>Vue中文社区-App</h3>
      <p>集论坛、问答、招聘等于一体的平台</p>
    </div>
  </div>
  <!--结束加载-->
  <div id="app">
    <router-view></router-view>
  </div>
  <script type="text/javascript">
    var PAGE_START_TIME = new Date().getTime() //记录页面初始化时间
  </script>


</html>